<!--
 * @Author: your name
 * @Date: 2020-09-01 01:45:44
 * @LastEditTime: 2020-09-01 03:26:37
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \data-paltform\src\views\components\RPAServer\index.vue
-->
<template>
  <div class="ground">
    <a-row :gutter="24" style="margin-bottom:24px;">
      <a-col :xs="24" :sm="24" :md="12" :lg="12">
        <a-card :bordered="false" hoverable title="当前发布任务数" size="small">
          <div ref="chart1" style="width:90%;height:200px"></div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12">
        <a-card :bordered="false" hoverable title="当前用户数" size="small">
          <div ref="chart2" style="width:90%;height:200px"></div>
        </a-card>
      </a-col>
    </a-row>
    <a-row :gutter="24" style="margin-bottom:24px;">
      <a-col :xs="24" :sm="24" :md="12" :lg="12">
        <a-card
          :bordered="false"
          hoverable
          title="当前任务运行状态"
          size="small"
        >
          <div ref="chart3" style="width:100%;height:200px"></div>
        </a-card>
      </a-col>
      <a-col :xs="24" :sm="24" :md="12" :lg="12">
        <a-card
          :bordered="false"
          hoverable
          title="月度用户增长趋势"
          size="small"
        >
          <div ref="chart4" style="width:90%;height:200px"></div>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  methods: {
    getEchartData() {
      const chart = this.$refs.chart1
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        }
        myChart.setOption(option)
      }
    },
    getEcharUser() {
      const chart = this.$refs.chart2
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          color: ['#3398DB'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              // 坐标轴指示器，坐标轴触发有效
              type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            {
              type: 'category',
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              axisTick: {
                alignWithLabel: true
              }
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '直接访问',
              type: 'bar',
              barWidth: '60%',
              data: [10, 52, 200, 334, 390, 330, 220]
            }
          ]
        }
        myChart.setOption(option)
      }
    },
    getStatus() {
      const chart = this.$refs.chart3
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b}: {c} ({d}%)'
          },
          legend: {
            orient: 'vertical',
            left: 10,
            data: ['在线率', '等待率', '离线率']
          },
          series: [
            {
              name: '访问来源',
              type: 'pie',
              radius: ['50%', '70%'],
              avoidLabelOverlap: false,
              label: {
                show: false,
                position: 'center'
              },
              emphasis: {
                label: {
                  show: true,
                  fontSize: '30',
                  fontWeight: 'bold'
                }
              },
              labelLine: {
                show: false
              },
              data: [
                { value: 335, name: '在线率' },
                { value: 310, name: '等待率' },
                { value: 234, name: '离线率' }
              ]
            }
          ]
        }
        myChart.setOption(option)
      }
    },
    getUpData() {
      const chart = this.$refs.chart4
      if (chart) {
        const myChart = this.$echarts.init(chart)
        const option = {
          xAxis: {
            type: 'category',
            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              smooth: true
            }
          ]
        }
        myChart.setOption(option)
      }
    }
  },
  mounted() {
    this.getEchartData()
    this.getEcharUser()
    this.getStatus()
    this.getUpData()
  }
}
</script>

<style lang="less" scoped>
.ground {
  text-align: left;
}
</style>
